<template>
	<view class="box">
		<view class="card_head">
			<u--image :src="userInfo.mediaUrl || '../../../static/default/default.png'" width="100px"
				height="100px" radius="5" ></u--image>
				<view class="description">
					<view class="title">
						<view class="description_title">
							{{userInfo.communityName || '未知'}}
						</view>
						<view class="titleType error" v-if="userInfo.payState == 0">
							未支付
						</view>
						<view class="titleType success" v-if="userInfo.payState == 1">
							已支付
						</view>
					</view>
					<view class="description_squaremetre">
						{{ userInfo.houseRoomName}}
					</view>
					<view class="row">
						<view class="money">
							{{userInfo.serviceCharge}}
							<view class="unit">
								元/月
							</view>
						</view>
						<view class="buttonRow" v-if="userInfo.payState == 0">
								<u-tag text="去支付" size="mini" type="error" shape="circle" @click="toPay(userInfo)"></u-tag>
						</view>
					</view>
					
				</view>
		</view>
		<view class="module">
			<view class="row_title">
				订单信息
			</view>
			<view class="card">
				<view class="row">
					<view class="title">
						订单编号
					</view>
					<view class="data">
						{{userInfo.orderNo}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						订单状态
					</view>
					<view class="data">
						<u-tag text="未支付" plain size="mini" type="error" shape="circle" v-if="userInfo.payState == 0"></u-tag>
						<u-tag text="已支付" plain size="mini" type="success"shape="circle" v-if="userInfo.payState == 1"></u-tag>
					</view>
				</view>
				<view class="row">
					<view class="title">
						经纪人手机号
					</view>
					<view class="data house_name">
						{{userInfo.brokerPhone}}
					</view>
					</view>
			<view class="row">
				<view class="title">
					费用描述
				</view>
				<view class="data house_name">
					{{userInfo.serviceName}}
				</view>
				</view>
				
				<view class="row" v-if="userInfo.payState == 1">
					<view class="title">
						支付时间
					</view>
					<view class="data">
						{{userInfo.payTime || '未知'}}
					</view>
				</view>
				<view class="row" v-if="userInfo.payState == 0">
					<view class="title">
						待支付金额
					</view>
					<view class="data house_name">
						{{userInfo.serviceCharge}}元
					</view>
					</view>
				<view class="row" v-if="userInfo.payState == 1">
					<view class="title">
						支付金额
					</view>
					<view class="data house_name">
						{{userInfo.serviceCharge}}元
					</view>
					</view>
				<view class="row" v-if="userInfo.payState == 1">
					<view class="title">
						支付方式
					</view>
					<view class="data">
						{{userInfo.payWay || '微信'}}
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		serviceOrderDetail
	} from "@/api/home/index.js"

	export default {
		data() {
			return {
				download_view: false,
				brokershow: false,
				id: 0,
				index: 0,
				current: 0,
				userInfo: {},
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getLeaseDetail()
			setTimeout(() => {
				this.download_view = true
			}, 1000)
		},
		methods: {
			toPay(userInfo){
				uni.redirectTo({
					url: './toPay?itemshop=' + JSON.stringify(userInfo),
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			async getLeaseDetail() {
				const res = await serviceOrderDetail(this.id);
				if (res.data.code == 200) {
					this.userInfo = res.data.data
				} else {
					this.$refs.uToast.show({
						message: '查看详情失败',
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)
					return
				}

				console.log(res);
			},
			handleChange(index) {
				this.current = index;
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.money {
		font-weight: bold;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;

		.card_head {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;
			.description {
				width: 100%;
				margin-left: 20rpx;
			
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
			
					.description_title {
						font-weight: bold;
						font-size: 36rpx;
						color: #000;
					}
			
					.titleType {
						font-weight: bold;
						font-size: 26rpx;
					}
			
					.success {
						color: #7f7f7f;
					}
			
					.error{
						color: #d02d37;
					}
				}
			
				.description_squaremetre {
					color: #7f7f7f;
					font-size: 28rpx;
					padding: 10rpx 0;
				}
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
				
					.money {
						font-weight: bold;
						font-size: 42rpx;
						color: red;
						display: flex;
						align-items: center;
				
						.unit {
							font-size: 28rpx;
						}
					}
				
					.buttom {
						display: flex;
						align-items: center;
				
						.custom-style {
							margin-left: 10rpx;
						}
					}
				
				}
			}
		}

		.back {
			background-color: #fff;
			@include flexBetween;
			padding: 20rpx;
		}

		.row {
			@include flexBetween;
			padding: 20rpx 0;
		}

		.collection {
			background-color: #f3f8fd;
			color: $noimportant;
			border-radius: 20rpx;
			padding: 20rpx;

			.link {
				line-height: 2;
			}
		}

		.title {
			color: $noimportant;
		}

		.row_title {
			font-weight: bold;
			padding: 30rpx;
		}

		.card {
			padding: 30rpx;
			background-color: #fff;
		}

		.data {
			display: flex;
			align-items: center;

			// text-align: right;
			// width: 60%;

		}

		.house_name {
			@include textOverflow;
			

		}

		.contract {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
		}

	}

	.popup {
		padding: 30rpx;

		.cue {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			padding: 40rpx;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}
</style>